<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="containerCivilCard_hd">
          残联业务
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <a @click="goCollectPage()">
          <div class="collect_list">
            <img src="@/assets/collect_images/build.jpg">
            <div>
              残疾人两项补贴
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="goCollectPage()">
          <div class="collect_list">
            <img src="@/assets/collect_images/build.jpg">
            <div>
              免费住院办理
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="goCollectPage()">
          <div class="collect_list">
            <img src="@/assets/collect_images/build.jpg">
            <div>
              残疾人法律援助
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="goCollectPage()">
          <div class="collect_list">
            <img src="@/assets/collect_images/build.jpg">
            <div>
              假肢安装
            </div>
          </div>
        </a>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <a @click="goCollectPage()">
          <div class="collect_list">
            <img src="@/assets/collect_images/build.jpg">
            <div>
              自行助学
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="goCollectPage()">
          <div class="collect_list">
            <img src="@/assets/collect_images/build.jpg">
            <div>
              危房改造办理
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="goCollectPage()">
          <div class="collect_list">
            <img src="@/assets/collect_images/build.jpg">
            <div>
              残疾证办理
            </div>
          </div>
        </a>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goCollectPage(key) {
      if (!key) {
        this.$message({
          message: "系统建设中...",
          type: "warning"
        });
        return;
      }
      this.$router.push({
        name: "collect",
        query: { approvalKey: key }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  .containerCivilCard_hd {
    height: 50px;
    width: 100%;
 margin-bottom: 25px;
    color: #3ba4f5;
    line-height: 50px;
    padding-left: 70px;
    font-size: 22px;
    position: relative;
    overflow: hidden;
  }
  .containerCivilCard_hd::after {
    position: absolute;
    left: 0;
    width: 60px;
    height: 1px;
    background-color: #3ba4f5;
    content: "";
    top: 24px;
  }
  .containerCivilCard_hd::before {
    position: absolute;
    right: 0;
    width: calc(100% - 210px);
    height: 1px;
    background-color: #3ba4f5;
    content: "";
    top: 24px;
  }
  .collect_list {
    border: solid 1px #ededed;
    box-shadow: 0 0 10px 0 rgba(238, 238, 238, 0.6);
    background-color: #fefefe;
    height: 100px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0px 28px 30px 0px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: block;
      line-height: 100px;
      padding: 0;
      margin: 0;
      margin-left: 14px;
    }
    div {
      padding: 0;
      margin: 0;
      margin-left: 10px;
      width: 155px;
      overflow: hidden;
      font-size: 15px;
      font-weight: 600;
    }
    &:hover {
      box-shadow: 0 0 50px 0 rgba(221, 221, 221, 0.6) !important;
      color: #3ba4f5;
    }
  }
}
</style>